<div class="project-metadata">
    <!-- Project name -->
    <che-input-box che-form="projectMetadataController.projectForm"
                   che-name="projectName"
                   che-label-name="Project Name"
                   che-place-holder="Name of the project"
                   aria-label="Name of the project"
                   ng-model="projectMetadataController.template.name"
                   ng-model-options="{allowInvalid: true}"
                   che-on-change="projectMetadataController.onNameChanged($value)"
                   required
                   custom-validator="projectMetadataController.isNameUnique($value)"
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\-\.]+$/">
      <div ng-message="required">A name is required.</div>
      <div ng-message="customValidator">This project name is already used.</div>
      <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div>
      <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
      <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
    </che-input-box>

    <!-- Project description -->
    <che-input-box che-form="projectMetadataController.projectForm"
                   che-name="projectDescription"
                   che-label-name="Description"
                   che-place-holder="Description of the project"
                   aria-label="Description of the project"
                   ng-model="projectMetadataController.template.description"
                   ng-model-options="{allowInvalid: true}"
                   che-on-change="projectMetadataController.onDescriptionChanged($value)"
                   ng-maxlength="256">
      <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
      <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
    </che-input-box>

    <!-- Git URL -->
    <div ng-if="projectMetadataController.template.source.type==='git'">
      <che-input-box che-form="projectMetadataController.projectForm"
                     che-name="projectGitURL"
                     che-label-name="Repository URL"
                     che-place-holder="Url of the git repository"
                     aria-label="Url of the git repository"
                     che-width="auto"
                     ng-model="projectMetadataController.template.source.location"
                     ng-model-options="{allowInvalid: true}"
                     che-on-change="projectMetadataController.onUrlChanged($value)"
                     git-url
                     required>
        <div ng-message="gitUrl">Invalid Git URL</div>
      </che-input-box>
    </div>

    <!-- Zip URL -->
    <div ng-if="projectMetadataController.template.source.type==='zip'">
      <che-input-box che-form="createProjectZipForm"
                     che-name="projectZipURL"
                     che-label-name="ZIP file URL"
                     che-place-holder="Url of the zip file"
                     aria-label="Url of the zip file"
                     che-width="auto"
                     ng-model="projectMetadataController.template.source.location"
                     che-on-change="projectMetadataController.onUrlChanged($value)"
                     required>
      </che-input-box>
    </div>
</div>
